<template>
  <div class="wang-editor-wrapper">
    <div class="editor-container" :style="containerStyle">
      <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor :defaultConfig="editorBaseConfig" :mode="mode" v-model="editorContent" @onCreated="handleCreated"
        @onChange="handleChange" @onDestroyed="handleDestroyed" @onFocus="handleFocus" @onBlur="handleBlur"
        @customAlert="handleCustomAlert" @customPaste="handleCustomPaste" />
    </div>
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef, watch, defineProps, defineEmits, computed } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';


// 定义组件 props
const props = defineProps({
  // 双向绑定的值
  modelValue: {
    type: String,
    default: ''
  },
  // 编辑器高度
  height: {
    type: [String, Number],
    default: '400px'
  },
  // 只读模式
  readOnly: {
    type: Boolean,
    default: false
  },
  // 编辑器配置
  editorConfig: {
    type: Object,
    default: () => ({})
  },
  // 工具栏配置
  toolbarConfig: {
    type: Object,
    default: () => ({
      excludeKeys: ["insertVideo","uploadVideo",'editVideoSize',"insertImage","group-video"],
    })
  },
  // 编辑器模式
  mode: {
    type: String,
    default: 'default'
  },
  // 自定义粘贴处理
  handlePaste: {
    type: Function,
    default: null
  },
  // 自定义提示处理
  handleAlert: {
    type: Function,
    default: null
  }
});

// 定义组件发出的事件
const emits = defineEmits([
  'update:modelValue', // 双向绑定更新事件
  'created',           // 编辑器创建完成
  'change',            // 内容变化
  'destroyed',         // 编辑器销毁
  'focus',             // 获得焦点
  'blur',              // 失去焦点
  'custom-alert',      // 自定义提示
  'custom-paste'       // 自定义粘贴
]);

// 编辑器实例
const editorRef = shallowRef(null);
// 编辑器内容
const editorContent = ref(props.modelValue);
// 容器样式
const containerStyle = ref({
  border: '1px solid #ccc',
  marginTop: '10px',
  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
  overflow: 'hidden'
});

const editorBaseConfig = computed(() => {
  return {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
         base64LimitSize: 5 * 1024*1024,
         maxFileSize: 5 * 1024*1024,
         allowedFileTypes: ['image/*'],
      }
    },
    ...props.editorConfig // 合并用户配置
  }
});

// 监听外部传入的内容变化
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal !== editorContent.value) {
      editorContent.value = newVal;
      if (editorRef.value) {
        editorRef.value.setHtml(newVal);
      }
    }
  },
  { immediate: true }
);

// 监听只读模式变化
watch(
  () => props.readOnly,
  (newVal) => {
    if (editorRef.value) {
      if (newVal) {
        editorRef.value.disable();
      } else {
        editorRef.value.enable();
      }
    }
  }
);

// 编辑器创建完成
const handleCreated = (editor) => {
  editorRef.value = editor;

  // 设置只读模式
  if (props.readOnly) {
    editor.disable();
  }

  emits('created', editor);
};

// 内容变化
const handleChange = (editor) => {
  const html = editor.getHtml();
  editorContent.value = html;
  emits('update:modelValue', html);
  emits('change', html, editor);
};

// 编辑器销毁
const handleDestroyed = (editor) => {
  emits('destroyed', editor);
};

// 获得焦点
const handleFocus = (editor) => {
  emits('focus', editor);
};

// 失去焦点
const handleBlur = (editor) => {
  emits('blur', editor);
};

// 自定义提示处理
const handleCustomAlert = (info, type) => {
  if (props.handleAlert) {
    props.handleAlert(info, type);
  } else {
    // 默认处理
    alert(`【自定义提示】${type} - ${info}`);
  }
  emits('custom-alert', info, type);
};

// 自定义粘贴处理
const handleCustomPaste = (editor, event, callback) => {
  if (props.handlePaste) {
    // 使用用户自定义处理函数
    props.handlePaste(editor, event, callback);
  } else {
    // 默认处理
    callback(true); // 继续默认的粘贴行为
  }
  emits('custom-paste', editor, event);
};

// 组件卸载前销毁编辑器
onBeforeUnmount(() => {
  if (editorRef.value) {
    editorRef.value.destroy();
    editorRef.value = null;
  }
});
</script>

<style scoped>
.wang-editor-wrapper {
  width: 100%;
}

.editor-container {
  border-radius: 4px;
}

.w-e-toolbar {
  border-bottom: 1px solid #ccc;
  background-color: #f8f9fa;
  padding: 4px 8px;
}

.w-e-text-container {
  height: calc(100% - 40px);
  /* 减去工具栏高度 */
}
</style>